<template>
  <div
    v-if="show==='show'"
    class="flex justify-between items-center"
    style="
      padding: 16px;
      padding-left: 16px;
      border-radius: 4px;
      background-color: #DFEFFF;
    "
  >
    <div style="color: #414a64; font-size: 18px">
      <i class="el-icon-question"></i>
      {{ msg }}
    </div>
    <el-button type="primary" @click="saveToLocal"> {{ $t('common.not_tip') }} </el-button>
  </div>
</template>

<script>
import { getDomainValue, setDomainValue } from './local-storage-util'

export default {
  name: 'Instruct',
  props: {
    domain: String,
    msg: {
      type: String,
      default: 'Not set msg'
    }
  },
  data() {
    return {
      show: 'show'
    }
  },
  mounted() {
    if (this.domain == undefined) {
      alert('The domain parameter is not set')
      return
    }
    this.rootNode = this.$store.getters['pageSettings']
    this.show = getDomainValue(this.rootNode, this.domain, this.show)
  },
  methods: {
    saveToLocal() {
      if (this.domain !== undefined) {
        setDomainValue(this.domain, 'hidden')
        this.show = 'hidden'
      }
    }
  }
}
</script>

<style>
</style>